<template>
	<Form label-width="100">
		<Row>
			<Col span="12">
			<Row class="grid">
				<Col v-for="(item, index) in form.elems.list" :key="index">
				<FormItem :label="index + '_' + item.label">
					<Input v-model="item.a" :placeholder="'请输入' + item.label" :ref="'c_' + index" @on-change="onInput"></Input>
				</FormItem>
				</Col>
			</Row>
			</Col>
			<Col span="12">
			<Row class="grid">
				<Col v-for="(item, index) in form.elems.list" :key="index">
				<FormItem :label="index + '_' + item.label">
					<Input v-model="item.a" :placeholder="'请输入' + item.label" :ref="'c_' + index" @on-change="onInput"></Input>
				</FormItem>
				</Col>
			</Row>
			</Col>
		</Row>
	</Form>
	<Row>
		<Button type="default" @click="add">操作</Button>
	</Row>
</template>
<script>
export default {
	name: 'ModelTest',
	data() {
		return {
			form: {
				elems: {
					list: [
						{
							a: 1,
							label: '栏目1',
						},
						{
							a: 2,
							label: '栏目2',
						},
						{
							a: 3,
							label: '栏目3',
						}
					]
				}
			}
		}
	},
	methods: {
		onInput(e) {
			console.log(e);
		},
		add() {
			this.box.a++;
		}
	}
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 10px;
	.ivu-col {
		.box {
			margin: 0 auto;
		}
	}
}
</style>